<template>
	<div class="main clear">
		<div class="main-left">
			<!-- <div class="hot-search">
				热门搜索：
				<router-link v-for="item in hotip" :key="item.ip_id"  :to="`/ipList/${item.ip_id}`">{{ item.ip_name }}</router-link>
			</div> -->
			<div class="video-list clear" v-for="item in res_data" :key="item.ip_id">
				<router-link class="more" :to="{ path: `/ip/${item.ip_id}`}">{{ '更多'+item.ip_name+'的视频>>'}}</router-link>
				<div class="follow">
					<span class="btn-follow" v-if="item.store!=1" @click="followFn(item)">+订阅</span>
					<span class="followed" v-else><i class="icon icon-followed"></i>已订阅</span>
				</div>
				<div class="ip-info">
					<div class="avatar-name">
						<div class="avatar"><img :src="imgBaseUrl+item.pic" /></div>
						<div class="name">{{ item.ip_name }}</div>
					</div>
					<p>{{ item.desc!=''?item.desc: '这个人很懒，什么都没有留下...' }}</p>
				</div>

				<div class="video-ip-box clear">
					<!-- video op -->
					<div class="video-ip" v-for="videoCard in item.list" :key="videoCard.aid">
						<router-link :to="{path: `ip/v/${videoCard.aid}`}" target="_blank" class="video-link">
							<div class="video-img">
								<div class="video-view">
									<img :src="imgBaseUrl+videoCard.pic" alt="" />
								</div>
							</div>
							<div class="video-title">{{videoCard.title}}</div>
						</router-link>
						
						<div class="video-info clear">
							<div class="right">
								<span :class="videoCard.storeClass" @click="storeFn(item,videoCard)">{{videoCard.store_num}}</span>
								<span :class="videoCard.good" @click="goodFn(item,videoCard)">{{videoCard.good_num}}</span>
							</div>
							<div class="left">
								<span :class="'icon-from icon-from-'+videoCard.pub_platform"></span>
								<span class="video-minutes">{{videoCard.minute}}</span>
							</div>
						</div>
					</div>
					<!-- video ed -->
				</div>
			</div>
			<div style="text-align: center">
				<el-pagination
					background
					layout="prev, pager, next"
					@current-change="handleCurrentChange" :current-page.sync="page" :page-size="5" :total="total">
				</el-pagination>
			</div>
		</div>
		<div class="main-right">
			<subject></subject>
		</div>
	</div>
</template>

<script>
import { IPGethotiplist, updategood, storefrontAdd, subscriptionAdd, IPGetlist, imgBaseUrl } from '@/api';
import { utilStore, utilGood, utilFollow, scrollToTop, setStore, getStore, } from '@/util/util'
import { mapState, mapMutations } from 'vuex'
import subject from '@/components/subject'
export default {
	data () {
		return {
			// 界面展示
			res_data: [],
			imgBaseUrl,
			user: null,
			aid: null,
			testArr: [],
			page: 1,
			total: null,
			hotip: [],
		}
	},
    components: { subject },
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	watch: {
		'$route' (to, from) {
			this.getResData();
		}
	},
	mounted() {
		this.getHotIPFn();
		this.getResData();
	},
	methods: {
		...mapMutations([
			'DIALOG_LOGIN',
		]),
		// 订阅
		followFn(item){
			utilFollow(item, this, 'res_data', subscriptionAdd, 1);
		},
		// 收藏
		storeFn(item,videoCard){
			if(this.login){
				let para = {
					aid: videoCard.aid,
					user_id: this.userInfo.user_id,
				}
				storefrontAdd(para).then(res=> {
					let index = this.res_data.indexOf(item)
					if(res.data){
						if (index !== -1) {
							let index_card = item.list.indexOf(videoCard);
							if(index_card !== -1){
								this.res_data[index].list[index_card].storeClass = 'icon-bg icon-store';
								this.res_data[index].list[index_card].store_num++;
							}
						}
					}else{
						if(res.tologin){
							this.DIALOG_LOGIN();
						}else {
							if(res.msg === '已经收藏过此视频'){
								this.res_data[index].list[index_card].storeClass = 'icon-bg icon-store';
							}
							this.$message.warning(res.msg);
						}
					}
				})
			}else{
				this.DIALOG_LOGIN();
			}
		},
		// 点赞 
		goodFn(item,videoCard){
			if(videoCard.goodcan){
				let para = {
					aid: videoCard.aid
				}
				updategood(para).then(res=> {
					if(res.data){
						let index = this.res_data.indexOf(item);
						if (index !== -1) {
							let index_card = item.list.indexOf(videoCard);
							if(index_card !== -1){
								this.res_data[index].list[index_card].good = 'icon-bg icon-good';
								this.res_data[index].list[index_card].good_num++;
								this.res_data[index].list[index_card].goodcan = false;
							}
						}
					}else{
						this.$message.warning(res.msg);
					}
				})
			}
		},
		// 翻页 
		handleCurrentChange(val) {
			this.$router.push('/ip?page='+val);
		},
		// 加载页面数据
		getResData(){
			this.page = this.$route.query.page?Number(this.$route.query.page):1;
			let para = {
				user_id: this.userInfo?this.userInfo.user_id:'',
				page: this.page,
				pagesize: 5
			};
			IPGethotiplist(para).then(res => {
				if(res.data){
					let data = res.data; 
					for(let i =0;i<data.length; i++){
						let list = data[i].list;
						for(let j=0;j<list.length; j++){
							list[j].storeClass = list[j].store!=1?'icon-bg icon-store-o':'icon-bg icon-store';
							list[j].good = 'icon-bg icon-good-o';
							list[j].goodcan = true;
						}
						data[i].list = list;
					}
					this.res_data = data
					this.total = res.total;
					
				}else{
					this.$message.warning(res.msg);
				}
			});
		},
		getHotIPFn(){
			IPGetlist().then(res => {
				res.data && (this.hotip = res.data);
			})
		},
	},
	
}
</script>

<style scoped lang="scss">

.main {
	.main-left {
		float: left;
		width: 895px;
		padding-bottom: 20px;
		.more {
			position: absolute;
			bottom: 10px;
			right: 10px;
		}
		.follow {
			position: absolute;
			bottom: 10px;
			left: 0;
			width: 208px;
			text-align: center;
		}
		.video-list {
			margin-bottom: 20px;
			position: relative;
			top: 0;
			left: 0;
		}
		.video-ip-box {
			float: right;
			width: 664px;
			.video-ip {
				float: left;
				width: 208px;
				margin-right: 20px;
				background: #fff;
				border-radius: 5px;
				overflow: hidden;
				.video-img {
					position: relative;
					padding-bottom: 56.25%;
					width: 100%;
					height: 0;
					overflow: hidden;
					.video-view {
						position: absolute;
						left: 0;
						top: 0;
						z-index: 0;
						width: 100%;
						height: 100%;
						overflow: hidden;
						transition: all .2s linear;
						-webkit-transition: all .2s linear;
					}
				}
				.video-title {
					margin: 8px 5px 8px 5px;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.video-info{
					margin: 8px 8px;
					margin-bottom: 10px;
					font-size: 12px;
					line-height: 16px;
					height: 16px;
					span {
						color: #999;
					}
				}
				.video-minutes {
					vertical-align: middle;
					padding-left: 4px;
				}
				.icon-store-o{
					background-position: 0 -144px;
				}
				.icon-good-o{
					background-position: 0 -128px;
				}
				.icon-store,.icon-store-o:hover{
					background-position: 0 -48px;
				}
				.icon-good,.icon-good-o:hover {
					background-position: 0 -16px;
				}
			}
			.video-ip:nth-child(3n){
				margin-right: 0;
			}
		
			.video-ip:hover {
				.video-view {
					-webkit-transform: scale(1.05);
					transform: scale(1.05);
				}
			}
		}
		.ip-info {
			width: 208px;
			height: 230px;
			overflow: hidden;
			background: #fff;
			border-radius: 5px;
			box-shadow:  0px 0px 5px #ccc;
			padding: 10px;
			float: left;
			.avatar {
				width: 70px;
				height: 70px;
				border-radius: 50%;
				margin: 0px auto;
				overflow: hidden;
				box-shadow: 0 0 4px rgba(0, 0, 0,.4);
				img {
					width: 100%;
					height: 100%;
				}
			}
			.name {
				text-align: center;
				font-size:18px;
				font-weight: bold;
				margin: 6px 0;
			}
			p{
				text-align: justify;
				padding: 0 10px;
				height: 76px;
				line-height: 19px;
				overflow: hidden;
			}
		}

		.hot-search {
			height: 40px;
			line-height: 40px; 
			border-bottom: 1px solid #ccc;
			margin-bottom: 25px;
			a {
				margin-left: 10px;
			}
		}
	}
	.main-right {
		float: right;
		width: 285px;
	}
}
</style>